<template>
  <view class="inbound-detail-container">
    <!-- 入库单基本信息 -->
    <view class="info-card">
      <view class="card-header">
        <text class="inbound-name">入库单：{{inbound.orderId}}</text>
        <uni-tag :text="inbound.orderWholeStatus === '0' || inbound.orderWholeStatus === '0'  ? '未完成' : '已完成'" :type="getTagType(inbound.orderWholeStatus)" size="small" />
      </view>
      <view class="info-section">
        <view class="section-title">基本信息</view>
        <view class="info-row">
          <text class="label">项目名称：</text>
          <text class="value">{{getProjectName(inbound.projectId )|| '-'}}</text>
        </view>
        <view class="info-row">
          <text class="label">客户名称：</text>
          <text class="value">{{inbound.companyName || '-'}}</text>
        </view>
        <view class="info-row">
          <text class="label">负责人：</text>
          <text class="value">{{inbound.manager || '-'}}</text>
        </view>
        <view class="info-row">
          <text class="label">联系人：</text>
          <text class="value">{{inbound.contactPerson || '-'}}</text>
        </view>
        <view class="info-row">
          <text class="label">联系人电话：</text>
          <text class="value">{{inbound.companyPerson || '-'}}</text>
        </view>
        <view class="info-row">
          <text class="label">取货司机：</text>
          <text class="value">{{ getDriverName(inbound.driver) || '-'}}</text>
        </view>
        <view class="info-row">
          <text class="label">货运方式：</text>
          <text class="value">{{ gettransport(inbound.transportType) || '-'}}</text>
        </view>
        <view class="info-row">
          <text class="label">实际用车：</text>
          <text class="value">{{getCarNo(inbound.factLicensePlate) || '-'}}</text>
        </view>
        <view class="info-row">
          <text class="label">取车公里数：</text>
          <text class="value">{{inbound.takeCarDistance || '-'}} 公里</text>
        </view>
        <view class="info-row">
          <text class="label">出发时间：</text>
          <text class="value">{{inbound.departTime || '-'}}</text>
        </view>
        <view class="info-row">
          <text class="label">完成时间：</text>
          <text class="value">{{inbound.inputStoreTime || '-'}}</text>
        </view>
        <view class="info-row">
          <text class="label">还车公里数：</text>
          <text class="value">{{inbound.returnCarDistance || '-'}} 公里</text>
        </view>
      </view>
      <view class="info-section">
        <view class="section-title">备注说明</view>
        <view class="description">
          {{inbound.remark || '没有工单描述'}}
        </view>
      </view>
    </view>
      <view class="info-section">
        <view class="section-title">货物清单</view>
        <view class="cargo-list">
          <view class="info-row" v-for="(item, index) in inbound.storeOrderAuxiliaryList" :key="index">
            <text class="label">{{item.name}}：</text>
            <text class="value">{{item.num}} 件</text>
          </view>
        </view>
      </view>
      <!-- <view class="info-section">
        <view class="section-title">相关图片</view>
        <view class="image-container">
          <view class="image-item">
            <text class="image-label">货物图片</text>
            <image 
              :src="inbound.imageCargo" 
              mode="aspectFit" 
              class="preview-image"
              @click="previewImage(inbound.imageCargo)"
            />
          </view>
          <view class="image-item">
            <text class="image-label">车辆图片</text>
            <image 
              :src="inbound.imageCar" 
              mode="aspectFit" 
              class="preview-image"
              @click="previewImage(inbound.imageCar)"
            />
          </view>
        </view>
      </view> -->
  </view>
</template>

<script>
import { getOrderDetailByType } from "@/api/mes/order"
import { listCar } from "@/api/mes/car"
import { getProjectAll } from "@/api/mes/project"
import { listDriver } from "@/api/mes/projectExtend"
import { getDicts } from "@/api/system/dict/data" // 引入字典API
export default {
  data() {
    return {
      id: "",
      orderType: "",
      inbound: { },
      car_list : [],
      project_list: [
      ],
      driver_list: [
        
      ],
      transport_type: [],
    }
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id;
      this.orderType = options.orderType;
      this.handleDetail(this.id,this.orderType);
    };
    this.getCarList();
    this.getProjectList();
    this.getDriverList();
    this.getDictData();
  },
  
  methods: {
    getTagType(status) {
      const typeMap = {
        '0': 'primary',
        '1': 'success',
      }
      return typeMap[status] || 'default'
    },
    // 获取字典数据
    getDictData() {
      getDicts('transport_type').then(response => {
        this.transport_type = response.data;
      });
      getDicts('order_status').then(response => {
        this.order_status = response.data
      });
    },
    getDriverList() {
      listDriver().then(response => {
        this.driver_list = response.data.map(driver => ({
          value: driver.userId.toString(),
          text: driver.nickName
        }));
      }); 
    }, 
    gettransport(carId) {
      if (!carId) return '-';
      const car = this.transport_type.find(item => item.dictValue === carId.toString());
      return car ? car.dictLabel : carId;
    },
    getDriverName(driver) {
      if (!driver) return '-';
      const driverItem = this.driver_list.find(item => item.value === driver.toString());
      return driverItem? driverItem.text : driver;
    },
    getCarList() {
    listCar().then(response => {
      this.car_list = response.data.map(car => ({
            value: car.carId.toString(),
            text: car.carNo
          }));
    });
  },
  getProjectList() {
      getProjectAll().then(response => {
        this.project_list = response.rows.map(project => ({
              value: project.projectId,
              text:  project.projectName,
            }));
      });
    },
    handleDetail(id,orderType) {
      getOrderDetailByType({orderId:id,orderType:orderType}).then(response => {
        this.inbound = response.data;
      }).catch(error => {
        console.error('获取入库单详情失败:', error);
      })
    },
    previewImage(url) {
        uni.previewImage({
          urls: [url],
          current: url
        });
      },
    getCarNo(carId) {
    if (!carId) return '-';
    const car = this.car_list.find(item => item.value === carId.toString());
    return car ? car.text : carId;
  },
    getProjectName(projectId) {
      if (!projectId) return '-';
      const project = this.project_list.find(item => item.value === projectId);
      return project ? project.text : projectId;
    },
  }
}
</script>

<style lang="scss" scoped>
.inbound-detail-container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

.info-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #f0f0f0;
  
  .inbound-name {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
  position: relative;
  padding-left: 20rpx;
  
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8rpx;
    height: 30rpx;
    width: 6rpx;
    background-color: #007aff;
    border-radius: 3rpx;
  }
}

.info-section {
  margin-bottom: 30rpx;
  
  .info-row {
    display: flex;
    margin-bottom: 24rpx;
    font-size: 28rpx;
    
    .label {
      color: #666;
      width: 180rpx;
      padding-right: 20rpx;
    }
    
    .value {
      flex: 1;
      color: #333;
      word-break: break-all;
    }
  }
}

.description {
  color: #666;
  line-height: 1.6;
}

.cargo-list {
  background-color: #fff;
  border-radius: 12rpx;
  
  .info-row {
    padding: 24rpx;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .label {
      font-weight: 500;
      color: #333;
    }
    
    .value {
      text-align: right;
      color: #007aff;
      font-weight: 500;
    }
  }
}

.image-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  
  .image-item {
    flex: 1;
    min-width: 300rpx;
    
    .image-label {
      display: block;
      font-size: 28rpx;
      color: #666;
      margin-bottom: 10rpx;
    }
    
    .preview-image {
      width: 100%;
      height: 300rpx;
      border-radius: 8rpx;
      background-color: #f8f8f8;
    }
  }
}
</style>